Add Services section with enhanced navigation and UX features - #5

Adds a Services section showcasing four service offerings (Data Annotation, Multilingual AI Training, Translation/Localization, Consultancy) with enhanced navigation and user experience features.

Changes

• Services Section: Four-card grid layout with service descriptions, emoji icons, and hover animations (5px lift, enhanced shadow)
• Navigation: Updated header menu to include About Me, Services, CV, Blog, Contact Me links
• Smooth Scrolling: CSS-based smooth scroll behavior for all anchor navigation
• Back-to-Top Button: Fixed position button with visibility logic (appears after 300px scroll) and smooth scroll to top

Implementation

Services grid uses responsive auto-fit layout:

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(11, 61, 145, 0.2);
}

Back-to-top visibility controlled via scroll event:

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 300) {
    backToTopButton.classList.add('visible');
  } else {
    backToTopButton.classList.remove('visible');
  }
});

All changes maintain existing design system (colors, typography, spacing) and accessibility patterns (ARIA labels, semantic HTML).

This pull request was created as a result of the following prompt from Copilot chat.

Incorporate additional services offered by Adamu Danjuma Abubakar into the portfolio website. Update longblog.html following these requirements:\n\n1. Services Section:\n - Create a "Services" section prominently highlighting the offerings. Services include:\n a. Data Annotation\n b. Multilingual AI Training\n c. Translation and Localization\n d. Consultancy (Low-Resource Languages for LLM, Cultural Nuances, AI Bias)\n - Provide a visually striking layout: use cards or sections to outline each service individually with accompanying descriptions.\n - Ensure proper spacing and hover effects for user interaction.\n\n2. Main Updates to Structure:\n - Include the "Services" section as another core section alongside "About Me," "CV," "Contact Me," "Blog," and "Poetry."\n - Make navigation seamless by adding a link to "Services" in the header menu.\n\n3. Enhancing Website Navigation and Functionality:\n - Use smooth scrolling for intra-page navigation links.\n - Add a back-to-top button for an improved user experience.\n\n4. Code Quality and Design:\n - Maintain a modular structure for new sections, with clear and concise comments.\n - Ensure the design aligns with the existing modern, accessible, and visually stunning UI/UX principles established earlier.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.